<template>
  <div class="app-container">
    <div class="content-card profile-card">
      <div class="card-header">
        <h2>个人信息</h2>
      </div>
      <el-form :model="form" ref="form" label-width="100px" class="profile-form">
        <el-form-item label="用户名">
          <el-input v-model="form.username" disabled>
            <template #prefix><el-icon class="el-input__icon"><User /></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.nickName">
            <template #prefix><el-icon class="el-input__icon"><UserFilled /></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-tag v-if="form.role == 1" type="danger">管理员</el-tag>
          <el-tag v-if="form.role == 2" type="success">读者</el-tag>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.phone">
            <template #prefix><el-icon class="el-input__icon"><Iphone /></el-icon></template>
          </el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地址">
          <el-input type="textarea" v-model="form.address" :rows="3"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update" style="width: 100%">
            <el-icon><Check /></el-icon>保存修改
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { ElMessage } from "element-plus";
import { User, UserFilled, Iphone, Check } from '@element-plus/icons-vue'

export default {
  name: "Person",
  components: {
    User, UserFilled, Iphone, Check
  },
  data() {
    return {
      form: {}
    }
  },
  created() {
    let str = sessionStorage.getItem("user") || "{}"
    this.form = JSON.parse(str)
  },
  methods: {
    update() {
      request.put("/user", this.form).then(res => {
        if (res.code === '0') {
          ElMessage.success("更新成功")
          sessionStorage.setItem("user", JSON.stringify(this.form))
          // 触发Layout更新用户信息
          this.$emit("userInfo")
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: var(--color-bg-1);
  min-height: calc(100vh - 60px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.content-card {
  background: #fff;
  border-radius: 4px;
  padding: 40px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 600px;
  margin-top: 40px;
}

.card-header {
  text-align: center;
  margin-bottom: 30px;
}

.card-header h2 {
  margin: 0;
  color: var(--color-text-1);
  font-weight: 600;
}

.profile-form {
  max-width: 400px;
  margin: 0 auto;
}
</style>
